<template>
  <div>
    <el-dialog
      title="新增产品型号"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        :model="addInfo"
        :rules="rules"
        ref="refAddInfo"
        label-width="110px"
      >
        <el-form-item size="small" label="产品型号" prop="model">
          <el-input
            clearable
            v-model.trim="addInfo.model"
            placeholder="请输入产品型号"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="产品ID" prop="accessId">
          <el-input
            clearable
            v-model.trim="addInfo.accessId"
            placeholder="请输入产品ID"
            maxlength="8"
            oninput="value=value.replace(/[^\w_]/g,'');"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="产品密钥" prop="accessKey">
          <el-input
            clearable
            v-model.trim="addInfo.accessKey"
            placeholder="请输入产品密钥"
            maxlength="32"
            oninput="value=value.replace(/[^\w_]/g,'');"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="联网方式" prop="network">
          <el-select
            filterable
            v-model="addInfo.network"
            placeholder="请选择联网方式"
            style="width: 100%"
          >
            <el-option
              v-for="item in networkList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="厂商" prop="manufacturerId">
          <el-select
            filterable
            v-model="addInfo.manufacturerId"
            placeholder="请选择厂商"
            style="width: 100%"
          >
            <el-option
              v-for="item in manufacturerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> 

        <el-form-item size="small" label="子设备" prop="isParent">
          <el-radio-group v-model="addInfo.isParent">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item size="small" label="产品型号描述" prop="description">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入产品型号描述"
            maxlength="100"
            v-model.trim="addInfo.description"
            resize="none"
            :autosize="{ minRows: 2, maxRows: 5 }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="confirm-button"
          @click="editSubmit"
          v-preventReClick="1000"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqProductModelAdd, reqManufacturerList } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "add",
  props: ["productId"],
  components: {},
  data() {
    return {
      dialogVisible: false,
      manufacturerList: [],
      addInfo: {
        model: "",
        accessId: "",
        accessKey: "",
        network: "",
        manufacturerId: "",
        description: "",
        isParent: 0,
      },
      networkList: [
        {
          id: 0,
          name: "蜂窝",
        },
        {
          id: 1,
          name: "Wi-Fi",
        },
        {
          id: 2,
          name: "NB-IOT",
        },
        {
          id: 3,
          name: "蓝牙",
        },
      ],
      rules: {
        model: [{ required: true, message: "请输入产品型号", trigger: "blur" }],
        accessId: [
          { required: true, message: "请输入产品ID", trigger: "blur" },
        ],
        accessKey: [
          { required: true, message: "请输入产品密钥", trigger: "blur" },
        ],
        network: [
          { required: true, message: "请选择联网方式", trigger: "change" },
        ],
        isParent: [
          { required: true, message: "请选择是否为子设备", trigger: "change" },
        ],
        manufacturerId: [
          { required: true, message: "请选择厂商", trigger: "change" },
        ],
      },
    };
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 获取厂商列表
    async getManufacturerList() {
      const res = await reqManufacturerList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.manufacturerList = res.data.rows;
    },
    // 点击
    async editSubmit() {
      this.$refs.refAddInfo.validate(async (valid) => {
        if (valid) {
          const res = await reqProductModelAdd({
            productId: this.productId,
            ...this.addInfo,
          });
          // console.log(res);
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("添加产品型号成功");
          this.$parent.ProductModelPage();
          this.closeEditDialog();
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.addInfo = {
        model: "",
        accessId: "",
        accessKey: "",
        network: "",
        manufacturerId: "",
        isParent: 0,
        description: "",
      };
      this.$refs.refAddInfo.resetFields();
      this.dialogVisible = false;
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
// 单选按钮
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #7367f0;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #7367f0;
  background: #7367f0;
}

/* 未选中状态的样式 */
::v-deep .el-radio {
  color: #cfd3ec;
}
</style>